<template>
    <chart :autoresize='true' :options='options'>
    </chart>
</template>

<script>
    // IndustryClassName: "家具制造企业"
    // num: 4
    export default {
        props: {
            data: {
                type: Array,
                default: []
            }
        },
        data() {
            return {};
        },
        computed: {
            options() {
                let hiddenDangerData = this.data.map(item => item.num * 10);// 乘10的目的是防止后续处理出现小数
                let max = Math.max(...hiddenDangerData);
                return {
                    backgroundColor: "transparent",
                    textStyle: {
                        fontSize: 12,
                        fontFamily: "PingFang",
                        fontWeight: 500,
                        color: "#ffffff"
                    },

                    "tooltip": {
                        "trigger": "axis",
                        "axisPointer": {
                            "type": "none",
                            textStyle: {
                                color: "#fff",
                                fontSize: 12
                            }

                        },
                        formatter: function (params) {
                            return params[0].axisValue + "  " + "隐患个数：" + Math.floor((params[0].value + params[1].value) / 10);
                        },
                        backgroundColor: "rgba(0,123,255,0.5)"
                    },
                    grid: {
                        left: "5%",
                        right: "5%",
                        bottom: "5%",
                        top: "30%",
                        padding: "0 20 0 0",
                        containLabel: true
                    },
                    "xAxis": [
                        {
                            "type": "category",
                            "axisLine": {
                                lineStyle: {
                                    color: "rgba(0,123,255,.5)",
                                    width: 1
                                }
                            },
                            "splitLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "splitArea": {
                                "show": false
                            },
                            "axisLabel": {
                                color: "rgba(255,255,255,0.7)"
                            },
                            data: this.data.map((item) => item.IndustryClassName)
                        },
                        {
                            "type": "category",
                            "axisLine": {
                                lineStyle: {
                                    color: "rgba(0,123,255,.5)",
                                    width: 1
                                }
                                // show:false
                            },
                            "splitLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "splitArea": {
                                "show": false
                            },
                            "axisLabel": {
                                show: false
                            },
                            position: "bottom",
                            data: this.data.map((item, index) => index)
                        },
                        {
                            "type": "category",
                            "axisLine": {
                                lineStyle: {
                                    color: "rgba(0,123,255,.5)",
                                    width: 1
                                }
                                // show:false
                            },
                            "splitLine": {
                                "show": false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "splitArea": {
                                "show": false
                            },
                            "axisLabel": {
                                show: false
                            },
                            position: "bottom",
                            data: this.data.map((item, index) => index)
                        }
                    ],
                    "yAxis": [
                        {
                            "type": "value",
                            "splitLine": {
                                "show": false
                            },
                            minInterval:10,
                            name: "隐患个数",
                            nameTextStyle: {
                                fontSize: 12,
                                fontFamily: "PingFang",
                                fontWeight: 400,
                                color: "rgba(255,255,255,0.8)"
                            },
                            "axisLine": {
                                lineStyle: {
                                    color: "rgba(0,123,255,.5)",
                                    width: 1
                                },
                                show: false
                            },
                            "axisTick": {
                                "show": false
                            },
                            "axisLabel": {
                                color: "rgba(255,255,255,0.5)",
                                align: "left",
                                margin: 20,
                                inside: false,
                                formatter: (value) => {
                                    return value / 10;
                                }

                            },
                            "splitArea": {
                                "show": false
                            }

                        }
                    ],
                    "series": [
                        //左侧边框
                        {
                            "type": "bar",
                            showSymbol: false,
                            barCategoryGap: "40%",
                            "itemStyle": {
                                "normal": {
                                    color: {
                                        x1: 0,
                                        y1: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#0045CA" // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: "#1372FF" // 100% 处的颜色
                                            }
                                        ]
                                    }
                                }
                            },
                            xAxisIndex: 1,
                            barWidth: 2,
                            data: this.data.map(() => max || 10)
                        },
                        //不透明叠加方块
                        {
                            "type": "bar",
                            showSymbol: false,
                            "itemStyle": {
                                "normal": {
                                    "color": "#1372FF"
                                }
                            },
                            barWidth: 14,
                            data: this.data.map(() => max * 0.1 || 1),
                            xAxisIndex: 2
                        },
                        //透明叠加方块
                        {
                            "type": "bar",
                            stack: "all",
                            showSymbol: false,
                            "itemStyle": {
                                "normal": {
                                    "color": "rgba(19,114,255,0)"
                                }
                            },
                            barWidth: 10,
                            data: this.data.map(() => max * 0.1 || 1)
                        },
                        //内部方块
                        {
                            "type": "bar",
                            stack: "all",
                            showSymbol: false,
                            "itemStyle": {
                                "normal": {
                                    color: {
                                        x1: 0,
                                        y1: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#1372FF" // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: "#0045CA" // 100% 处的颜色
                                            }
                                        ]
                                    },
                                    borderWidth: 1,
                                    borderColor: "#060b28"

                                }
                            },
                            label: {
                                show: true,
                                formatter: function (obj) {
                                    return Math.floor((obj.value + max * 0.1) / 10);
                                },
                                position: "top",
                                fontSize: 10,
                                fontFamily: "PingFang",
                                fontWeight: 400,
                                color: "rgba(255,255,255,1)"
                            },
                            barWidth: 13,
                            data: hiddenDangerData.map(item => Math.max(item - max * 0.1,0))
                        },
                        //左侧边框
                        {
                            "type": "bar",
                            xAxisIndex: 1,
                            showSymbol: false,
                            "itemStyle": {
                                "normal": {
                                    color: {
                                        x1: 0,
                                        y1: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#0045CA" // 0% 处的颜色
                                            }, {
                                                offset: 1,
                                                color: "#1372FF" // 100% 处的颜色
                                            }
                                        ]
                                    }

                                }
                            },
                            barGap: "600%",
                            barCategoryGap: "10%",
                            barWidth: 2,
                            data: this.data.map(() => max || 10)
                        }

                    ]
                };
            }
        }
    };
</script>